<style lang="scss">
.page-wrap{
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.page-container{
  flex:1;
  overflow-y: scroll;
}

.task-action{

}

.fun-tab-title{
  border-bottom: 1px solid $fun-border-color;
  color: #333;
  font-weight: 600;
}
.container{
  font-size: 28rpx;
  line-height: 1.6;
  padding: 20rpx;
  box-sizing: border-box;
}
.task-title{
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}
.task-price{
  font-size: 36rpx;
  font-weight: bold;
  color: $fun-red-color;
}
.head{
  padding: 20rpx;
}
.conclose{
  height: 320rpx;
  overflow: hidden;
}

.task-time{
  font-size: 28rpx;
  margin: 20rpx 0;
  /*padding: 8rpx 20rpx;*/
  color: #E64340;
  /*border-radius: 10rpx;*/
  /*background: linear-gradient(to right, #E64340, rgba(255,120,0,.4));*/
}

.imgs{
  height: 200rpx;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  padding: 20rpx;
  .imgs-item{
    display: inline-block;
    height: 200rpx;
    margin-right: 20rpx;
  }
}

</style>
<template>
  <view class="page-wrap">

    <scroll-view scroll-y class="page-container">
      <div class="head bg-white">
        <div class="task-title">{{info.title}}</div>
        <div class="p-t-10 p-b-10" v-if="tags.length>0">
          <u-tag class="m-r-10" v-for="(tag,idx) in tags" :key="idx" size="mini" shape="circle" :text="tag.name" :type="tag.style"></u-tag>
        </div>
        <div class="p-b-10">
          <u-line-progress :striped="true" :show-percent="true" active-color="#19be6b" height="24" :percent="info.percent"></u-line-progress>
        </div>
        <div class="c6 fz-16">
          <span class="color-green">{{info.gain_num}}</span>/{{info.require_num}}
        </div>
        <div class="task-time" v-if="timeReady">
          <block v-if="timeOjb.is_end">已结束</block>
          <block v-else-if="timeOjb.is_start && !timeOjb.is_end">{{ timeOjb.d }}天{{timeOjb.h}}时{{timeOjb.s}}秒后截止</block>
          <block v-else-if="!timeOjb.is_start && !timeOjb.is_end">{{ timeOjb.d }}天{{timeOjb.h}}时{{timeOjb.s}}秒后开始</block>
        </div>
        <div class="c9 fz-12 flex flex-vertical-c flex-justify-between">
          <span>{{info.create_at}}发布</span>
          <span>{{info.hits}}次浏览</span>
        </div>
      </div>
      <div v-if="imgs.length>0" class="h10"></div>
      <div v-if="imgs.length>0" class="fun-tab-title">项目图片</div>
      <scroll-view scroll-x v-if="imgs.length>0" class="imgs">
        <image  class="imgs-item" v-for="(item,idx) in imgs" :key="idx" :src="item" @click="previewImg(idx)" mode="heightFix"></image>
      </scroll-view>
      <div class="h10"></div>
      <div class="fun-tab-title">任务详情</div>
      <div class="container">
        <div :class="{conclose:!full}">
          <u-parse :html="content"></u-parse>
        </div>
        <div class="m-15 text-center">
          <u-button :ripple="true" size="mini" type="success" v-if="!full" @click="bindTaggleFull">显示全部</u-button>
          <u-button :plain="true" :ripple="true" size="mini" v-if="full" @click="bindTaggleFull">折叠</u-button>
        </div>
      </div>

      <div class="h10"></div>
      <div class="fun-tab-title">任务说明</div>
      <div class="ext bg-white p-10" style="line-height: 1.6">
        <div>1.项目来源真实且经过平台审核</div>
        <div>2.平台拥有项目相关的解释权</div>
      </div>
    </scroll-view>
    <div class="task-action p-b-safe-area" v-if="timeOjb.is_start && !timeOjb.is_end">
      <div class="flex flex-vertical-c" style="width: 750rpx;">
        <div class="p-l-10 p-r-10 fz-12" v-if="userInfo.id">您有{{userInfo.points_num}}积分</div>
        <u-button class="flex1" @click="showDialogFn" type="success" :ripple="true" :custom-style="btnCustomStyle" >立即参与</u-button>
      </div>
      <!--<u-button v-else disabled type="error" :ripple="true" :custom-style="btnCustomStyle" >您已参与该项目</u-button>-->
    </div>

    <u-popup v-model="showDialog" mode="center" border-radius="10">
      <div class="p-20" style="overflow: hidden;width: 500rpx;">
        <div class="text-center fz-13 c6">您共有<span class="color-red">{{userInfo.points_num}}</span>粒大米</div>
        <div style="padding-top: 30rpx;">
          <u-input v-model="number" placeholder="请输入捐赠大米数量" :max="userInfo.points_num" type="number" step="1" border></u-input>
        </div>
        <div style="padding-top: 30rpx;">
          <u-button type="success" @click="joinTaskFunc">确认捐赠</u-button>
        </div>
      </div>
    </u-popup>

  </view>
</template>

<script>
import { pageMixin } from '@/mixins'
import { info } from '@/api'
import { Exception } from '@/common/Exception'
import { getCountdownFunc, setNavigationBarTitle } from '@/common/helper'
import UParse from '@/uview-ui/components/u-parse/u-parse'
import store from '@/store'
import { task, joinTask } from '@/api/task'
import UButton from '@/uview-ui/components/u-button/u-button'
import UTag from '@/uview-ui/components/u-tag/u-tag'
import { confirm, linkToEasy, modal } from '@/common/fun'
import ULineProgress from '../../uview-ui/components/u-line-progress/u-line-progress'
import UPopup from '../../uview-ui/components/u-popup/u-popup'
import UInput from '../../uview-ui/components/u-input/u-input'
import { checkIsLogin } from '../../common/helper'
import { error } from '../../common/fun'
import { flashUserInfo } from '../../api'

var timeCtx = null

export default {
  components: { UInput, UPopup, ULineProgress, UTag, UButton, UParse },
  mixins: [pageMixin],
  data () {
    return {
      number: '',
      userInfo: { points_num: 0 },
      showDialog: false,
      btnCustomStyle: {
        borderRadius: 0
      },
      timeReady: false,
      timeOjb: {
        d: '',
        h: '',
        m: '',
        s: '',
        is_start: false,
        is_end: false
      },
      tags: [],
      imgs: [],
      full: false,
      id: '',
      info: {
        is_join: false
      },
      unix_start_time: 0,
      unix_end_time: 0,
      content: ''
    }
  },
  methods: {
    showDialogFn () {
      if (checkIsLogin(1, 1)) {
        this.showDialog = true
      }
    },
    toSubmitTask () {
      linkToEasy('/pages/task/submit?id=' + this.id)
    },
    joinTaskFunc () {
      if (!this.number) {
        error('请输入捐赠的大米数量')
        return
      }
      joinTask({ task_id: this.id, number: this.number }, { tip: '捐赠中...' }).then(res => {
        // this.info.is_join = true
        this.getUserFullInfo()

        this.info.gain_num += Number(this.number)

        confirm({
          title: '提示',
          content: '捐赠成功，任务离达成又近了一步。感谢您的参与，有点庆幸。',
          confirmText: '确认',
          cancelText: '查看记录'
        }).then(() => {
          this.showDialog = false
        }).catch(() => {
          this.showDialog = false
          linkToEasy('/pages/points/index?idx=1')
        })
      }).catch(err => {
        Exception.handle(err)
      })
    },
    previewImg (current) {
      uni.previewImage({
        urls: this.imgs,
        current
      })
    },
    bindTaggleFull () {
      this.full = !this.full
    },
    refreshTime () {
      this.timeOjb = getCountdownFunc({ start_timeStamp: this.unix_start_time, end_timeStamp: this.unix_end_time })
      // console.log(JSON.stringify(this.timeOjb))
      if (this.timeOjb.is_end) {
        clearInterval(timeCtx)
      }
    },
    async _init_func () {
      // const self = this
      // const id = this.$wxpage.options.id
      // const from_mid = self.$wxpage.options.from_mid ? self.$wxpage.options.from_mid : wx.setStorageSync('from_mid')
      //
      // if (from_mid && !wx.getStorageSync('from_mid')) {
      //   wx.setStorageSync('from_mid', from_mid)
      // }

      const article = await task({ id: this.id }).then(res => res.data).catch(err => Exception.handle(err))

      var tag_styles = ['primary', 'success', 'warning', 'error', 'info']

      if (article.tags) {
        this.tags = article.tags.split('|').map(item => {
          return { name: item, style: tag_styles[parseInt(Math.random() * 5)] }
        })
      }

      if (article.imgs) {
        this.imgs = article.imgs.split('|')
      }

      article.percent = article.require_num <= 0 ? 0 : (parseInt(article.gain_num / article.require_num * 100 * 100) / 100)

      this.info = article

      this.unix_start_time = uni.$dayjs(this.info.start_time).unix()
      this.unix_end_time = uni.$dayjs(this.info.end_time).unix()

      this.refreshTime()
      this.timeReady = true
      timeCtx = setInterval(this.refreshTime, 1000)

      this.content = article.content
      setNavigationBarTitle(article.title)

      // self.config.navigationBarTitleText = ret.title;
    },
    getUserFullInfo () {
      if (checkIsLogin(0, 0)) {
        flashUserInfo().then(res => {
          console.log(res)
          this.userInfo = res.data
        }).catch(e => {

        })
      }
    }
  },
  onShareAppMessage () {
    const userInfo = store.getters.getUserInfo(); let path = '/pages/task/detail?id=' + this.info.id

    // 加入分享标识
    if (userInfo && userInfo.id) {
      path = path + '&from_mid=' + userInfo.id
    }

    // console.log(userInfo,path)
    return {
      title: '#任务#' + this.info.title,
      path: path
    }
  },
  onUnload () {
    clearInterval(timeCtx)
  },

  onShow () {
    this.getUserFullInfo()
  },
  onLoad (options) {
    this.id = options.id
    this._init_func()
  }
}
</script>
